<template>
    <div class="detail-container" v-loading="loading" style="position: relative">
        <div style="margin-bottom:40px;text-align: center;" v-if="data.isCanEdit == 1 && data.currentUserType == 2">
            <el-button  style="width:150px;" @click="submit(0)" type="primary" :loading="btnLoading">提交</el-button>
            <el-button  style="width:150px;" @click="submit(1)" :loading="btnLoading2">弃票</el-button>
        </div>
        <div style="position: fixed;left:20px;top:200px;" class="leftName">
            <div style="font-size:14px;margin-top:20px;line-height: 30px;color:#000;margin-bottom:5px;">
                <div style="position: relative;z-index: 1;padding:8px 10px;line-height:22px;border-radius: 4px;background: #409eff;color:#fff;text-align: center;margin:0 auto;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
                    <div style="font-size:16px"><span style="font-size:12px">被投人：</span>{{data.userRealName}}</div>
                </div>
                <div style="background: #fff;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);margin-top: -20px;border:1px solid #eee;padding:20px 10px 0 10px;line-height:36px;border-radius: 5px;">
                    <div style="border-bottom:1px solid #EBEEF5;" v-if="type!='average' && data.isCanEdit == 1 && data.currentUserType == 2"><span :style="{'letter-spacing':type=='average' ? '14px' : '7px'}" >{{type=='average' ? '平均分' : '评分'}}</span>：{{ data.itemList | fifEvaluateScore}}</div>
                    <div v-else>
                        <div style="border-bottom:1px solid #EBEEF5;">
                            <span :style="{'letter-spacing':type=='average' ? '14px' : '7px'}">{{type=='average' ? '平均分' : '评分'}}</span>：{{ data.evaluateScore}}
                        </div>
                    </div>

                    <div style="border-bottom:1px solid #EBEEF5;" v-if="type!='average' && data.isCanEdit == 1 && data.currentUserType == 2"><span style="letter-spacing:0px" >{{type=='average' ? '百分制平均分' : '百分制'}}</span>：{{ data.itemList | fifEvaluateScoreBF(data.itemAllScore)}}</div>
                    <div v-else>
                        <div style="border-bottom:1px solid #EBEEF5;">
                            <span style="letter-spacing:0px">{{type=='average' ? '百分制平均分' : '百分制'}}</span>：{{ data.actualScore}}
                        </div>
                    </div>

                    <div style="border-bottom:1px solid #EBEEF5"><span :style="{'letter-spacing':type=='average' ? '56px' : '14px'}">部</span>门：{{data.departName}}</div>
                    <div><span :style="{'letter-spacing':type=='average' ? '56px' : '14px'}">职</span>务：{{data.dutyName}}</div>
                </div>
            </div>
        </div>
        <el-card class="box-card" style="padding:20px;width:1000px;min-height:1188px;margin:0 auto;position: relative">
            <div id="template-div">
                <div style="font-size:32px;font-weight:bold;text-align: center;line-height: 50px">{{data.activityName}}</div>
                <div style="font-size:14px;color:#000;line-height:30px;text-align: center">投票截止日期：{{data.evaluateEndTime}}</div>
                 <div style="display: flex;justify-content: space-between;align-items: center;font-size:14px;margin-top:20px;line-height: 30px;color:#000;margin-bottom:10px;padding-right:270px;">
                     <div>被投人：<span style="font-weight: bold;font-size:16px">{{data.userRealName}}</span></div>
                     <div>部门：{{data.departName}}</div>
                     <div>职务：{{data.dutyName}}</div>
                 </div>
                <div v-if="type!='average' && data.isCanEdit == 1 && data.currentUserType == 2" style="position: absolute;right:20px;top:65px">
                    <div style="font-size:14px"><span>本问卷满分值：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.itemAllScore}}</span></div>
                    <div style="font-size:14px"><span>本问卷得分值：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.itemList | fifEvaluateScore}}</span></div>
                    <div style="font-size:14px"><span style="letter-spacing: 3px;">百分制分值：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.itemList | fifEvaluateScoreBF(data.itemAllScore)}}</span></div>
                </div>
                <div v-else style="position: absolute;right:20px;top:65px">
                    <div style="font-size:14px"><span :style="{'letter-spacing':type=='average' ? '2px' : '0'}">本问卷满分值：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.itemAllScore}}</span></div>
                    <div style="font-size:14px"><span>{{type=='average' ? '本问卷平均分值' : '本问卷得分值'}}：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.evaluateScore}}</span></div>
                    <div style="font-size:14px"><span :style="{'letter-spacing':type=='average' ? '0px' : '3px'}">{{type=='average' ? '百分制平均分值' : '百分制分值'}}：</span><span style="font-size:30px;font-weight: bold;color:red">{{data.actualScore}}</span></div>
                </div>

                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="fistTable">
                    <tr class="th">
                        <Td style="width:190px;border-bottom:0">项目</Td>
                        <Td style="border-bottom:0">标准</Td>
                        <Td style="padding:0 20px;width:150px;border-bottom:0">{{type=='average' ? '平均分' : '评分'}}</Td>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="fistTable">
                    <tr v-for="item in data.itemList">
                        <Td align="center" valign="middle" style="width:100px;font-weight: bold">{{item.itemName}}</Td>
                        <Td colspan="2" style="padding:0">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr v-for="(c,ii) in item.subItems">
                                    <!--评分-->
                                    <template v-if="c.itemType == 'other_score'">
                                        <td valign="middle" align="center" style="width:90px;font-weight: bold"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}"
                                            v-if="c.itemValues.length > 0">{{c.itemName}}</td>
                                        <td valign="middle" colspan="2"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}"
                                            style="padding:0 20px;font-weight: bold"
                                            v-else><div class="sub-item-div">{{c.itemName}}</div></td>
                                        <td  :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="padding:0" v-if="c.itemValues.length > 0">
                                            <div v-for="(cc,iii) in c.itemValues" class="sub-item-div" :style="{'border-top':iii == 0 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">{{cc.name}}</div>
                                        </td>
                                        <td style="padding:0 20px;width:150px;border-right:0" :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                                            <div v-if="type!='average' && data.isCanEdit == 1 && data.currentUserType == 2">
                                                <el-slider v-model="c.itemEvaluateScore" :max="c.itemScore" :step="0.1" ></el-slider>
                                                <div style="text-align: center">得分：{{c.itemEvaluateScore}}</div>
                                            </div>
                                            <div v-else style="text-align: center">{{c.itemEvaluateScore}}</div>
                                        </td>
                                    </template>
                                    <!--自评-->
                                    <template v-else>
                                        <td valign="middle" align="center" style="width:90px;font-weight: bold"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">{{c.itemName}}</td>
                                        <td  :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" colspan="2" style="border-right:0">
                                              <div class="sub-item-div" style="white-space: pre-wrap;">{{c.itemValues}}</div>
                                        </td>
                                    </template>
                                </tr>
                            </table>
                        </Td>

                    </tr>
                </table>
                <div style="display: flex;justify-content: space-between;align-items: center;font-size:14px;margin-top:10px;line-height: 30px;color:#000;" v-if="data.currentUserType == 3">
                    <!--<div>投票人：{{data.evaluateRealName}}</div>-->
                    <div>投票时间：{{data.evaluateTime}}</div>
                </div>

            </div>
        </el-card>
        <div style="margin-top:40px;text-align: center" v-if="data.isCanEdit == 1 && data.currentUserType == 2">
            <el-button  style="width:150px;" @click="submit(0)" type="primary" :loading="btnLoading">提交</el-button>
            <el-button  style="width:150px;" @click="submit(1)" :loading="btnLoading2">弃票</el-button>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {evaluateForm,evaluateSubmit,evaluateSummaryForm} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                type:this.$route.query.type,
                data:[],
                btnLoading:false,
                eId:this.$route.query.eId,
                auId:this.$route.query.auId,
                btnLoading2:false,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getItemList();
        },
        filters: {
            fifEvaluateScore(list){
                let sum = 0;
                list.forEach((el)=>{
                    el.subItems.forEach((ee)=>{
                        if(ee.itemType == 'other_score'){
                                sum = sum + parseFloat(ee.itemEvaluateScore)
                        }
                    })
                });
                return sum.toFixed(2)
            },
            fifEvaluateScoreBF(list,itemAllScore){
                let sum = 0;
                list.forEach((el)=>{
                    el.subItems.forEach((ee)=>{
                        if(ee.itemType == 'other_score'){
                            sum = sum + parseFloat(ee.itemEvaluateScore)
                        }
                    })
                });
                let res = (sum/itemAllScore)*100;
                return res.toFixed(2)
            },

        },
        methods:{
            submit(type){
                let data = {};
                data.eId = this.eId;
                data.isAbstain = type;
                if(data.isAbstain == 0){
                    data.itemList = [];
                    let sum = 0;
                    let err = 0;
                    this.data.itemList.forEach((e)=>{
                        e.subItems.forEach((ee)=>{
                            if(ee.itemType == 'other_score'){
                                data.itemList.push({itemId:ee.itemId,evaluateScore:ee.itemEvaluateScore,itemScore:ee.itemScore});
                                sum = sum + parseFloat(ee.itemEvaluateScore);
                                if(ee.itemEvaluateScore <= 0){
                                    err = 1;
                                }
                            }
                        })
                    });
                    if(err == 1){
                        this.$message({
                            type: 'warning',
                            message: '不充许有投零分的选项！'
                        });
                        return false
                    }
                    let bf = '';
                    bf = (sum/this.data.itemAllScore)*100;
                    this.$confirm('当前评分为 '+ sum.toFixed(2) +' ,百分制分值为'+ bf.toFixed(2) +' 是否提交?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.btnLoading = true;
                        this.evaluateSubmitData(data);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消提交'
                        });
                    });
                }else{
                    this.btnLoading2 = true;
                    this.evaluateSubmitData(data);
                }

            },

            //提交投票
            evaluateSubmitData(data){
                evaluateSubmit(data).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    });
                    this.btnLoading = false;
                    this.btnLoading2 = false;
                    this.getItemList();
                }).catch(()=>{
                    this.btnLoading = false;
                    this.btnLoading2 = false;
                })
            },
            //获取项目列表
            getItemList(){
                if(this.type == 'average'){
                    evaluateSummaryForm({auId:this.auId}).then((res)=>{
                        this.data = res
                    })
                }else{
                    evaluateForm({eId:this.eId}).then((res)=>{
                        this.data = res
                    })
                }

            },
        }
    }
</script>

<style lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #template-div{
        table.fistTable{
            border-left:1px solid #EBEEF5;
            border-top: 1px solid #EBEEF5;
        }
        table{
            td{
                border-right:1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
                font-size:14px;
                padding:8px 0;
                line-height: 20px;
                color:#000
            }
            .th{
                text-align: center;
                font-weight: bold;
                background: #f5f7fa;
            }
            .sub-item-div{
                padding:8px;

            }
        }
    }
    .leftName{
        margin-left:180px;
    }
    .hideSidebar .leftName{
        margin-left:36px;
    }
</style>
